<template>
  <div class="app-container calendar-list-container">
    <el-row>
      <el-col :span="24">
        <div>
          <TableFrom
            :list="list"
            @handleSelectionChange="handleSelectionChange"
            :options="options"
            :columns="columns"
            :operates="operates"
            :formItems="formItems"
            :tabFrom="tabFrom"
            :pagination="pagination"
            @submit="handleSubmit"
            @batchSubmit="batchDataClick"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          >
          </TableFrom>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TableFrom from '@/components/packages/publicTable.vue';
import { NowTime } from '@/utils/getDate';
export default {
  name: 'logTab',
  components: {
    TableFrom
  },
  data() {
    return {
      formItems: [
        {
          lable: '',
          type: 'daterange',
          key: 'date',
          placeholder: '请选择日期',
          defaultValue: NowTime(),
          rules: [],
          style: { width: '300px' }
        },
        {
          lable: '操作人：',
          type: 'input',
          key: 'username',
          placeholder: '请输入操作人',
          style: { width: '200px' }
        },
        {
          lable: '请求类型：',
          type: 'dropDown',
          key: 'requestType',
          placeholder: '请求类型',
          style: { width: '200px' },
          clearable: true,
          option: [
            {
              label: 'POST',
              value: 'POST'
            },
            {
              label: 'GET',
              value: 'GET'
            }
          ]
        }
      ],

      list: [], // table数据
      listParm: {
        page: 1,
        size: 10,
        start: '',
        end: '',
        username: ''
      },
      options: {
        stripe: true, // 是否为斑马纹 table
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        indexList: true,
        page: true
      }, // table 的参数
      //表头操作
      tabFrom: {
        selectButton: true, //是否展示查询按钮
        resetting: true //是否展示重置按钮
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      columns: [
        {
          key: 'name',
          label: '操作名',
          align: 'center'
        },
        {
          key: 'username',
          label: '操作人',
          align: 'center'
        },
        {
          key: 'costTime',
          label: '操作耗时',
          align: 'center',
          formatter: (row, col, cellVaule) => {
            return row.costTime + 'ms';
          }
        },
        {
          key: 'ip',
          label: '操作人IP',
          align: 'center'
        },
        {
          key: 'requestParam',
          label: '操作参数',
          align: 'center',
          overflow: true //是否超出隐藏一处行隐藏
        },
        {
          key: 'requestUrl',
          label: '操作接口',
          align: 'center'
        },
        {
          key: 'requestType',
          label: '请求类型',
          align: 'center'
        },
        {
          key: 'createTime',
          label: '操作时间',
          align: 'center'
        }
      ], // 需要展示的列

      operates: {
        width: 150,
        list: []
      } // 列操作按钮
    };
  },
  mounted: function() {
    var _this = this;
    this.getList(1, this.pagination.pageSize);
    window.bus.$on('blogTableReload', function() {
      _this.getList(_this.pagination.currentPage, _this.pagination.pageSize);
    });
  },
  methods: {
    search() {
      this.getList(1, this.pagination.pageSize);
    },
    handleSubmit(formDataInfo) {
      var _this = this;
      _this.listParm = formDataInfo;
      _this.getList(1, this.pagination.pageSize);
    },

    async getList(page, size) {
      var _this = this;
      if (page) _this.listParm.page = page;
      if (size) _this.listParm.size = size;
      let res = await this.$api.logApi.logList(_this.listParm, {
        loadingTime: 100,
        loadingText: '数据加载中...'
      });
      if (res) {
        this.list = res.records;
        this.pagination.currentPage = res.current;
        this.pagination.totalCount = res.total;
      }
    },
    handleSizeChange(val) {
      this.listParm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listParm.page = val;
      this.getList();
    }
  }
};
</script>
